<template>
	<view class="page">
		<view class="top-box">
			<image src="@/static/logo.png" mode="widthFix" class="logo"></image>
		</view>
		<view class="btn-box">
			<view class="loginMiddle">
				<view class="loginFraim">
					<!-- 账户名 -->
					<view class="loginUserNameInput">
						<input placeholder="请输入用户名" v-model="dataForm.username" type="text" class="userNameInput" />
					</view>
					
					<!-- 密码 -->
					<view class="loginPassWordInput">
						<view class="">
							<input placeholder="请输入密码" :password="SecretIsShow" v-model="dataForm.password"  class="passwordInput" />
							<button 
								@click="ChangeSecretShow()" class="keysecret" >
							</button>
						</view>
					</view>
					
					<view class="captcha">
						<img :src="captchaPath" @click="getCaptcha()">
						<input placeholder="请输入验证码" class="captchaInput" v-model="dataForm.captcha" />
					</view>

				</view>
				<view class="loginButton">
					<button class="lButton" @click="login()">登录</button> 					
				</view>
			</view>

			<view class="text-28 flex-ct">
				  <uni-checkbox v-model="isChecked" @click="toggleCheckbox">
				    <uni-icon v-if="isChecked" type="success" ></uni-icon>
				  </uni-checkbox>
				<!-- <icons type='success' size='26'></icons> -->
				<radio class="RadioSize"></radio>
				<text decode=""> ' '&nbsp &nbsp登录即同意</text>				
				<navigator class="text-link" hover-class="none" url="/pages/user/Privacy">《合同在线签服务协议和隐私政策》</navigator>
			</view>
			
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
	
</template>

<script>
	import getUUID from '../../utils/getUUid.js'
	import http from '../../utils/request.js'
	import {mapMutations}  from 'vuex'
	export default {
		data() {
			return {
				type: 1,
				captchaPath: "",
				SecretIsShow:true,
				isChecked:false,
				loginstate:false,
				msgType: 'success',
				dataForm: {
					username: '',
					password: '',
					uuid: '',
					captcha: ''
				},
				form: {
					password: '',
					phone: '',
					verificationCode: '',
				},
				disabled: false,
				btnText: "获取验证码"
			}

		},
		created() {
			this.getCaptcha()
		},
		computed: {
			disabledNext() {
				return !this.form.phone || this.form.verificationCode.length !== 6;
			}
		},
		methods: {
			...mapMutations(['saveLoginStatus', 'saveUserInfo']),
			// 获取验证码
			getCaptcha() {
				this.dataForm.uuid = getUUID()
				console.log(http)
				this.captchaPath = `${http.baseUrl}/captcha?uuid=${this.dataForm.uuid}`
			},
			
			// 登录
			async login() {
				console.log("进来了登录方法")
				console.log(this.dataForm)
				const response = await this.$api.user.login(this.dataForm)
				console.log('数据结果', response)
				if (response.data.code == 0) {
					this.$refs.uToast.show({
						// ...params,
						// loading: true,
						message: "登陆成功",
						type: "success",
						duration: 2000,
						complete() {
							uni.reLaunch({
								url: '/pages/tabbar/index',
							});
						}
					})
				} else {
					this.$refs.uToast.show({
						// ...params,
						// loading: true,
						message: "验证码或密码错误",
						icon: "close-circle-fill",
						type: "error",
						duration: 2000,
						complete() {
							uni.reLaunch({
								url: '/pages/login/login',
							});
						}
					})
					this.getCaptcha()
				}
				// 保存用户信息和token
				this.saveLoginStatus(response.data.data)
				// 获取用户信息
				this.getUserInfo()
				// 跳转页面这里后面应该改成uni.navigateBack({
				// 	delta: 
				// });
				// 因为可以让用户先进去看到页面信息，如果要进行操作则弹框提示请登录，登录成功则返回上一级页面
			},
			async getUserInfo() {
				const res = await this.$api.user.getUserInfo();
				console.log('用户信息结果', res)
				if (res.data.code === 0) {
					this.loginstate=!this.loginstate
					console.log("成功获取用户信息")
					// 保存用户信息到vuex中
					let userInfo = {}
					userInfo = res.data.data
					this.saveUserInfo(userInfo)
				}
				else{
					this.$refs.uToast.show({
						// ...params,
						// loading: true,
						message: "获取用户信息失败，可以重新登录获取",
						type: "error",
						duration: 2000,
					})
					return 0
				}
			},

			submit() {
				console.log("进来了手机号登录方法")
				uni.reLaunch({
					url: '/pages/tabbar/index',
				});
			},
			getPhoneNumber() {
				console.log("得到手机号")
			},
			
			ChangeSecretShow(){
				this.SecretIsShow=!this.SecretIsShow
			},
			toggleCheckbox(){
				this.isChecked = !this.isChecked
			},
			
		}
	}
</script>

<style lang="scss">
	button {
		/* 清除默认边框 */
		border: 0;
		outline: none;
		/*清除默认背景 */
		background-color: transparent;
	}

	.btn-box {
		margin: 0 auto;
		width: 600rpx;
		height: 600rpx;
	}

	.flex-ct {
		font-size: 26rpx;
	}

	.text-link {
		color: #3277ff;
	}

	.top-box {

		margin-top: 100rpx;
		margin-bottom: 50rpx;
		padding: 0 24rpx;
		position: relative;
	}

	.logo {
		margin: 50rpx auto 0;
		width: 150rpx;
		height: 150rpx;
		display: block;
		position: relative;
		z-index: 1;
	}

	.text-28 {
		display: flex;
		align-content: flex-start;
		color: #333333;
		line-height: 56rpx;
		font-weight: 500;

	}


	.btn-box .loginMiddle {
		width: 600rpx;
		height: 450rpx;

	}

	.btn-box .loginFraim {
		width: 600rpx;
		height: 350rpx;

	}

	.loginFraim .loginUserNameInput {
		width: 600rpx;
		height: 110rpx;

	}

	.loginFraim .loginPassWordInput {
		margin-top: 20rpx;
		width: 600rpx;
		height: 110rpx;
	}

	.loginFraim .captcha {
		display: flex;
		margin-top: 20rpx;
		width: 600rpx;
		height: 100rpx;
	}

	.loginFraim img {
		width: 250rpx;
	}

	.loginFraim .captchaInput {
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #eaeaea;
		margin-left: 50rpx;
		width: 300rpx;
		height: 100rpx;
	}

	.userNameInput {
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		width: 100%;
		height: 100rpx;
		background-color: #eaeaea;

	}

	.passwordInput {
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		width: 100%;
		height: 100rpx;
		background-color: #eaeaea;
		
	}
	
	.keysecret{
	  position: absolute;
	  top: 31%;
	  right: 50px;
	  transform: translateY(-50%);
	  width: 20px;
	  height: 20px;
	  background-image: url("../../static/my/secret is show.png");
	  background-size: contain;
	  background-repeat: no-repeat;
	}
	
	.lButton {
		margin-top: 20rpx;
		width: 100%;
		height: 80rpx;
		background-color: #02bcff;
		color: white;
		font-weight: 600;
	}
	
	.RadioSize{
		width: 2px;
		height: 2px;
	}
	
</style>